impr(@typegpu/cli): Next.js template#2596
Conversation
|
pkg.pr.new packages benchmark commit |
Bundle size comparison (
|
| 🟢 Decreased | ➖ Unchanged | 🔴 Increased | ❔ Unknown |
|---|---|---|---|
| 0 | 320 | 0 | 0 |
import { ... } in PR vs import * as ... in PR (is the library tree-Shakeable?):
Click to reveal the results table (297 entries).
| Test | tsdown |
|---|---|
| d_Void.ts | 87.40 kB ( |
| d_sampler.ts | 87.41 kB ( |
| d_isPtr.ts | 87.41 kB ( |
| d_comparisonSampler.ts | 87.42 kB ( |
| d_isSizeAttrib.ts | 87.41 kB ( |
| d_isWgslArray.ts | 87.41 kB ( |
| d_isAlignAttrib.ts | 87.41 kB ( |
| d_isWgslStruct.ts | 87.41 kB ( |
| d_isAtomic.ts | 87.41 kB ( |
| d_isBuiltinAttrib.ts | 87.42 kB ( |
| d_isLocationAttrib.ts | 87.42 kB ( |
| d_isDecorated.ts | 87.41 kB ( |
| d_isInterpolateAttrib.ts | 87.42 kB ( |
| d_atomic.ts | 87.41 kB ( |
| d_ptrHandle.ts | 87.41 kB ( |
| d_ptrUniform.ts | 87.41 kB ( |
| d_ptrStorage.ts | 87.41 kB ( |
| d_ptrPrivate.ts | 87.41 kB ( |
| d_ptrFn.ts | 87.41 kB ( |
| d_ptrWorkgroup.ts | 87.41 kB ( |
| d_textureExternal.ts | 87.42 kB ( |
| d_textureStorage1d.ts | 87.42 kB ( |
| d_textureStorage2d.ts | 87.42 kB ( |
| d_textureStorage3d.ts | 87.42 kB ( |
| d_textureStorage2dArray.ts | 87.42 kB ( |
| d_isDisarray.ts | 87.41 kB ( |
| d_isUnstruct.ts | 87.41 kB ( |
| d_isLooseDecorated.ts | 87.42 kB ( |
| d_isLooseData.ts | 87.41 kB ( |
| d_isWgslData.ts | 87.41 kB ( |
| d_unstruct.ts | 87.41 kB ( |
| d_isData.ts | 87.41 kB ( |
| d_deepEqual.ts | 87.41 kB ( |
| d_struct.ts | 87.41 kB ( |
| d_ref.ts | 87.40 kB ( |
| std_discard.ts | 103.14 kB ( |
| std_copy.ts | 103.13 kB ( |
| std_arrayLength.ts | 103.14 kB ( |
| std_isBeingTranspiled.ts | 103.15 kB ( |
| std_getTargetShaderLanguage.ts | 103.15 kB ( |
| std_extensionEnabled.ts | 103.15 kB ( |
| std_range.ts | 103.13 kB ( |
| std_dpdx.ts | 103.13 kB ( |
| std_fwidthCoarse.ts | 103.14 kB ( |
| std_dpdxCoarse.ts | 103.14 kB ( |
| std_dpdyCoarse.ts | 103.14 kB ( |
| std_fwidthFine.ts | 103.14 kB ( |
| std_dpdxFine.ts | 103.14 kB ( |
| std_dpdyFine.ts | 103.14 kB ( |
| std_fwidth.ts | 103.14 kB ( |
| std_dpdy.ts | 103.13 kB ( |
| d_bool.ts | 87.40 kB ( |
| d_f16.ts | 87.40 kB ( |
| d_f32.ts | 87.40 kB ( |
| d_i32.ts | 87.40 kB ( |
| d_u32.ts | 87.40 kB ( |
| d_u16.ts | 87.40 kB ( |
| std_atomicLoad.ts | 103.14 kB ( |
| std_textureBarrier.ts | 103.14 kB ( |
| std_atomicStore.ts | 103.14 kB ( |
| std_workgroupBarrier.ts | 103.15 kB ( |
| std_storageBarrier.ts | 103.14 kB ( |
| std_atomicAdd.ts | 103.14 kB ( |
| std_atomicAnd.ts | 103.14 kB ( |
| std_atomicMax.ts | 103.14 kB ( |
| std_atomicMin.ts | 103.14 kB ( |
| std_atomicSub.ts | 103.14 kB ( |
| std_atomicXor.ts | 103.14 kB ( |
| std_atomicOr.ts | 103.14 kB ( |
| d_textureDepth2d.ts | 87.41 kB ( |
| d_textureDepthCube.ts | 87.42 kB ( |
| d_texture1d.ts | 87.41 kB ( |
| d_texture2d.ts | 87.41 kB ( |
| d_texture3d.ts | 87.41 kB ( |
| d_textureDepth2dArray.ts | 87.42 kB ( |
| d_textureCube.ts | 87.41 kB ( |
| d_textureDepthCubeArray.ts | 87.42 kB ( |
| d_textureDepthMultisampled2d.ts | 87.43 kB ( |
| d_texture2dArray.ts | 87.41 kB ( |
| d_textureCubeArray.ts | 87.42 kB ( |
| d_textureMultisampled2d.ts | 87.42 kB ( |
| d_disarrayOf.ts | 87.41 kB ( |
| d_vec2b.ts | 87.41 kB ( |
| d_vec2f.ts | 87.41 kB ( |
| d_vec2h.ts | 87.41 kB ( |
| d_vec2i.ts | 87.41 kB ( |
| d_vec2u.ts | 87.41 kB ( |
| d_vec3b.ts | 87.41 kB ( |
| d_vec3f.ts | 87.41 kB ( |
| d_vec3h.ts | 87.41 kB ( |
| d_vec3i.ts | 87.41 kB ( |
| d_vec3u.ts | 87.41 kB ( |
| d_vec4b.ts | 87.41 kB ( |
| d_vec4f.ts | 87.41 kB ( |
| d_vec4h.ts | 87.41 kB ( |
| d_vec4i.ts | 87.41 kB ( |
| d_vec4u.ts | 87.41 kB ( |
| std_subgroupAdd.ts | 103.14 kB ( |
| std_subgroupBroadcastFirst.ts | 103.15 kB ( |
| std_subgroupExclusiveAdd.ts | 103.15 kB ( |
| std_subgroupExclusiveMul.ts | 103.15 kB ( |
| std_subgroupInclusiveAdd.ts | 103.15 kB ( |
| std_subgroupInclusiveMul.ts | 103.15 kB ( |
| std_subgroupShuffleDown.ts | 103.15 kB ( |
| std_subgroupShuffleXor.ts | 103.15 kB ( |
| std_subgroupBroadcast.ts | 103.15 kB ( |
| std_subgroupShuffleUp.ts | 103.15 kB ( |
| std_subgroupShuffle.ts | 103.14 kB ( |
| std_subgroupBallot.ts | 103.14 kB ( |
| std_subgroupElect.ts | 103.14 kB ( |
| std_subgroupAll.ts | 103.14 kB ( |
| std_subgroupAnd.ts | 103.14 kB ( |
| std_subgroupAny.ts | 103.14 kB ( |
| std_subgroupMax.ts | 103.14 kB ( |
| std_subgroupMin.ts | 103.14 kB ( |
| std_subgroupMul.ts | 103.14 kB ( |
| std_subgroupXor.ts | 103.14 kB ( |
| std_subgroupOr.ts | 103.14 kB ( |
| d_formatToWGSLType.ts | 87.42 kB ( |
| d_uint8.ts | 87.41 kB ( |
| d_unorm10_10_10_2.ts | 87.42 kB ( |
| d_unorm8x4_bgra.ts | 87.41 kB ( |
| d_float16x2.ts | 87.41 kB ( |
| d_float16x4.ts | 87.41 kB ( |
| d_float32x2.ts | 87.41 kB ( |
| d_float32x3.ts | 87.41 kB ( |
| d_float32x4.ts | 87.41 kB ( |
| d_snorm16x2.ts | 87.41 kB ( |
| d_snorm16x4.ts | 87.41 kB ( |
| d_unorm16x2.ts | 87.41 kB ( |
| d_unorm16x4.ts | 87.41 kB ( |
| d_sint16x2.ts | 87.41 kB ( |
| d_sint16x4.ts | 87.41 kB ( |
| d_sint32x2.ts | 87.41 kB ( |
| d_sint32x3.ts | 87.41 kB ( |
| d_sint32x4.ts | 87.41 kB ( |
| d_snorm8x2.ts | 87.41 kB ( |
| d_snorm8x4.ts | 87.41 kB ( |
| d_uint16x2.ts | 87.41 kB ( |
| d_uint16x4.ts | 87.41 kB ( |
| d_uint32x2.ts | 87.41 kB ( |
| d_uint32x3.ts | 87.41 kB ( |
| d_uint32x4.ts | 87.41 kB ( |
| d_unorm8x2.ts | 87.41 kB ( |
| d_unorm8x4.ts | 87.41 kB ( |
| d_float16.ts | 87.41 kB ( |
| d_float32.ts | 87.41 kB ( |
| d_sint8x2.ts | 87.41 kB ( |
| d_sint8x4.ts | 87.41 kB ( |
| d_snorm16.ts | 87.41 kB ( |
| d_uint8x2.ts | 87.41 kB ( |
| d_uint8x4.ts | 87.41 kB ( |
| d_unorm16.ts | 87.41 kB ( |
| d_sint16.ts | 87.41 kB ( |
| d_sint32.ts | 87.41 kB ( |
| d_snorm8.ts | 87.41 kB ( |
| d_uint16.ts | 87.41 kB ( |
| d_uint32.ts | 87.41 kB ( |
| d_unorm8.ts | 87.41 kB ( |
| d_sint8.ts | 87.41 kB ( |
| d_packedFormats.ts | 87.41 kB ( |
| d_isPackedData.ts | 87.41 kB ( |
| std_textureDimensions.ts | 103.15 kB ( |
| std_textureGather.ts | 103.14 kB ( |
| std_textureSampleBaseClampToEdge.ts | 103.16 kB ( |
| std_textureSampleCompareLevel.ts | 103.15 kB ( |
| std_textureSampleCompare.ts | 103.15 kB ( |
| std_textureSampleLevel.ts | 103.15 kB ( |
| std_textureSampleBias.ts | 103.15 kB ( |
| std_textureSampleGrad.ts | 103.15 kB ( |
| std_textureSample.ts | 103.14 kB ( |
| std_textureStore.ts | 103.14 kB ( |
| std_textureLoad.ts | 103.14 kB ( |
| d_alignmentOf.ts | 87.41 kB ( |
| std_translation4.ts | 103.14 kB ( |
| std_rotationX4.ts | 103.14 kB ( |
| std_rotationY4.ts | 103.14 kB ( |
| std_rotationZ4.ts | 103.14 kB ( |
| std_identity2.ts | 103.14 kB ( |
| std_identity3.ts | 103.14 kB ( |
| std_identity4.ts | 103.14 kB ( |
| std_scaling4.ts | 103.14 kB ( |
| d_isBuiltin.ts | 87.41 kB ( |
| d_sizeOf.ts | 87.41 kB ( |
| d_isContiguous.ts | 87.41 kB ( |
| d_getLongestContiguousPrefix.ts | 87.43 kB ( |
| d_arrayOf.ts | 87.41 kB ( |
| d_size.ts | 87.40 kB ( |
| d_align.ts | 87.41 kB ( |
| d_location.ts | 87.41 kB ( |
| d_interpolate.ts | 87.41 kB ( |
| d_invariant.ts | 87.41 kB ( |
| d_mat4x4f.ts | 87.41 kB ( |
| d_mat2x2f.ts | 87.41 kB ( |
| d_mat3x3f.ts | 87.41 kB ( |
| d_matToArray.ts | 87.41 kB ( |
| d_builtin.ts | 87.41 kB ( |
| std_unpack2x16float.ts | 103.14 kB ( |
| std_unpack4x8unorm.ts | 103.14 kB ( |
| std_pack2x16float.ts | 103.14 kB ( |
| std_pack4x8unorm.ts | 103.14 kB ( |
| std_bitcastU32toF32.ts | 103.14 kB ( |
| std_bitcastU32toI32.ts | 103.14 kB ( |
| std_neg.ts | 103.13 kB ( |
| std_bitShiftRight.ts | 103.14 kB ( |
| std_bitShiftLeft.ts | 103.14 kB ( |
| std_add.ts | 103.13 kB ( |
| std_div.ts | 103.13 kB ( |
| std_mod.ts | 103.13 kB ( |
| std_mul.ts | 103.13 kB ( |
| std_sub.ts | 103.13 kB ( |
| std_translate4.ts | 103.14 kB ( |
| std_rotateX4.ts | 103.14 kB ( |
| std_scale4.ts | 103.14 kB ( |
| std_rotateY4.ts | 103.14 kB ( |
| std_rotateZ4.ts | 103.14 kB ( |
| d_memoryLayoutOf.ts | 87.41 kB ( |
| std_and.ts | 103.13 kB ( |
| std_or.ts | 103.13 kB ( |
| std_select.ts | 103.14 kB ( |
| std_allEq.ts | 103.13 kB ( |
| std_all.ts | 103.13 kB ( |
| std_not.ts | 103.13 kB ( |
| std_eq.ts | 103.13 kB ( |
| std_lt.ts | 103.13 kB ( |
| std_ne.ts | 103.13 kB ( |
| std_isCloseTo.ts | 103.14 kB ( |
| std_any.ts | 103.13 kB ( |
| std_ge.ts | 103.13 kB ( |
| std_gt.ts | 103.13 kB ( |
| std_le.ts | 103.13 kB ( |
| std_dot4U8Packed.ts | 103.14 kB ( |
| std_length.ts | 103.14 kB ( |
| std_countTrailingZeros.ts | 103.15 kB ( |
| std_distance.ts | 103.14 kB ( |
| std_dot.ts | 103.13 kB ( |
| std_countLeadingZeros.ts | 103.15 kB ( |
| std_firstTrailingBit.ts | 103.15 kB ( |
| std_firstLeadingBit.ts | 103.14 kB ( |
| std_fract.ts | 103.13 kB ( |
| std_frexp.ts | 103.13 kB ( |
| std_modf.ts | 103.13 kB ( |
| std_quantizeToF16.ts | 103.14 kB ( |
| std_mix.ts | 103.13 kB ( |
| std_countOneBits.ts | 103.14 kB ( |
| std_dot4I8Packed.ts | 103.14 kB ( |
| std_determinant.ts | 103.14 kB ( |
| std_extractBits.ts | 103.14 kB ( |
| std_faceForward.ts | 103.14 kB ( |
| std_inverseSqrt.ts | 103.14 kB ( |
| std_reverseBits.ts | 103.14 kB ( |
| std_insertBits.ts | 103.14 kB ( |
| std_smoothstep.ts | 103.14 kB ( |
| std_normalize.ts | 103.14 kB ( |
| std_transpose.ts | 103.14 kB ( |
| std_saturate.ts | 103.14 kB ( |
| std_degrees.ts | 103.14 kB ( |
| std_radians.ts | 103.14 kB ( |
| std_reflect.ts | 103.14 kB ( |
| std_refract.ts | 103.14 kB ( |
| std_acosh.ts | 103.13 kB ( |
| std_asinh.ts | 103.13 kB ( |
| std_atan2.ts | 103.13 kB ( |
| std_atanh.ts | 103.13 kB ( |
| std_clamp.ts | 103.13 kB ( |
| std_cross.ts | 103.13 kB ( |
| std_floor.ts | 103.13 kB ( |
| std_ldexp.ts | 103.13 kB ( |
| std_round.ts | 103.13 kB ( |
| std_trunc.ts | 103.13 kB ( |
| std_acos.ts | 103.13 kB ( |
| std_asin.ts | 103.13 kB ( |
| std_atan.ts | 103.13 kB ( |
| std_ceil.ts | 103.13 kB ( |
| std_cosh.ts | 103.13 kB ( |
| std_exp2.ts | 103.13 kB ( |
| std_log2.ts | 103.13 kB ( |
| std_sign.ts | 103.13 kB ( |
| std_sinh.ts | 103.13 kB ( |
| std_sqrt.ts | 103.13 kB ( |
| std_step.ts | 103.13 kB ( |
| std_tanh.ts | 103.13 kB ( |
| std_abs.ts | 103.13 kB ( |
| std_cos.ts | 103.13 kB ( |
| std_exp.ts | 103.13 kB ( |
| std_fma.ts | 103.13 kB ( |
| std_log.ts | 103.13 kB ( |
| std_max.ts | 103.13 kB ( |
| std_min.ts | 103.13 kB ( |
| std_pow.ts | 103.13 kB ( |
| std_sin.ts | 103.13 kB ( |
| std_tan.ts | 103.13 kB ( |
| common_fullScreenTriangle.ts | 57.18 kB ( |
| common_writeSoA.ts | 57.17 kB ( |
| STATIC_allImports.ts | 287.20 kB ( |
| STATIC_d.ts | 87.40 kB ( |
| STATIC_std.ts | 103.13 kB ( |
If you wish to run a comparison for other, slower bundlers, run the 'Tree-shake test' from the GitHub Actions menu.
Resolution Time Benchmark---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Random Branching (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [0.88, 1.72, 3.47, 5.59, 7.10, 9.37, 18.98, 23.02]
line [0.92, 1.78, 3.92, 5.29, 6.33, 9.91, 20.72, 22.76]
line [0.86, 1.64, 3.46, 5.90, 6.46, 9.91, 19.29, 22.01]
---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Linear Recursion (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [0.27, 0.50, 0.68, 0.81, 1.09, 1.13, 1.31, 1.48]
line [0.28, 0.55, 0.68, 0.80, 1.06, 1.14, 1.33, 1.48]
line [0.33, 0.51, 0.61, 0.71, 0.99, 0.99, 1.22, 1.37]
---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Full Tree (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [0.86, 1.90, 4.12, 5.57, 10.81, 23.36, 48.97, 101.01]
line [0.76, 1.78, 4.39, 5.78, 11.03, 23.59, 49.04, 103.72]
line [0.98, 2.35, 4.55, 5.67, 10.95, 23.14, 50.19, 98.88]
|
e108045 to
1dc6371
Compare
There was a problem hiding this comment.
Important
Two template correctness issues need fixing before this can land: the root page.tsx declares a generateStaticParams() function even though it is not a dynamic route, and SVG imports from public/ are accessed as if they were Next.js StaticImageData objects (they are URL strings at runtime).
Reviewed changes — new nextjs-bare template for @typegpu/cli using Next.js 16 App Router, static export, Tailwind v4, and @typegpu/react.
- Added
nextjs-bareoption toPROJECT_TEMPLATESinoptions.ts. - Added the full template scaffold: page layout, TypeGPU shader component, Next.js/Babel/PostCSS/Tailwind/TypeScript/Oxlint configs, static assets, editor settings, and agent instructions.
ℹ️ Nitpicks
.nvmrcsays Node 24 but_package.jsonuses@types/node ^20;template-vite-reactuses^24.12.3.oxlint.config.tsdoes not setbrowserornodeenv. Consider addingbrowser: trueandnode: truesobabel.config.jsCommonJS globals and browser globals lint correctly.
Kimi K2 (free via Pullfrog for OSS) | 𝕏
There was a problem hiding this comment.
Important
The latest commit removes the invalid generateStaticParams() export, but the SVG logo issue raised in the previous review is still present.
Reviewed changes — the follow-up commit addressed one correctness issue in the template's root page, while an earlier image-import issue remains unresolved.
- Removed
generateStaticParams()fromapp/page.tsx— the root page is not a dynamic route, so the function was invalid;output: 'export'already produces a static/. - SVG logo imports still rely on
.src— thepublic/SVG imports are notStaticImageDataobjects in Next.js, so the.srcaccess returnsundefinedat runtime. See the inline comment for evidence and the required fix.
Kimi K2 (free via Pullfrog for OSS) | 𝕏
| {/* TypeGPU */} | ||
| <div className="min-w-0 flex-1 border-r border-border p-8 max-[1024px]:border-r-0 max-[1024px]:border-b max-[1024px]:px-5 max-[1024px]:py-6"> | ||
| <picture className="mb-2 flex h-7 items-center max-[1024px]:h-6 max-[1024px]:justify-center"> | ||
| <source srcSet={typegpuLogoDark.src} media="(prefers-color-scheme: dark)" /> |
There was a problem hiding this comment.
typegpuLogoDark.src is undefined at runtime. Next.js does not expose a StaticImageData object for *.svg imports; its image-types/global.d.ts declares *.svg as any, and the runtime default import is the asset URL string. When output: 'export' builds the template, the logos will not render.
Technical details
# SVG imports from `public/` are URL strings, not objects
## Affected sites
- `packages/typegpu-cli/templates/template-nextjs-bare/app/page.tsx:5-7` — SVG imports from `public/`
- `packages/typegpu-cli/templates/template-nextjs-bare/app/page.tsx:28` — `<source srcSet={typegpuLogoDark.src}>`
- `packages/typegpu-cli/templates/template-nextjs-bare/app/page.tsx:31` — `<img src={typegpuLogoLight.src}>`
- `packages/typegpu-cli/templates/template-nextjs-bare/app/page.tsx:99` — `<img src={nextLogo.src}>`
- `packages/typegpu-cli/templates/template-nextjs-bare/app/page.tsx:119` — `<img src={nextLogo.src}>`
## Required outcome
The logos resolve to valid public URLs after `next build`.
## Suggested approach
Remove the three SVG imports and reference the files by their absolute public paths:
- `/typegpu-logo-dark.svg`
- `/typegpu-logo-light.svg`
- `/next.svg`
## Evidence
- Next.js recommends referencing `public` files from the base URL rather than importing them ([public folder docs](https://nextjs.org/docs/app/api-reference/file-conventions/public-folder)).
- Next.js declares only raster image imports as `StaticImageData`; `*.svg` is typed as `any` specifically to avoid conflicts with `@svgr/webpack` and similar plugins ([image-types/global.d.ts](https://unpkg.com/next@16.2.7/image-types/global.d.ts)).
Let's wait for #2588.